<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>客户数据批量导入</title>
	<!-- jquery file upload-8.7.1 -->
	<link href="${contextPath}/static/widgets/jquery-fileupload-8.7.1/css/jquery.fileupload-ui.css" rel="stylesheet" />	
	<script src="${contextPath }/static/widgets/jquery-fileupload-8.7.1/js/jquery.ui.widget.js"></script>
	<script src="${contextPath }/static/widgets/jquery-fileupload-8.7.1/js/jquery.iframe-transport.js"></script>
	<script src="${contextPath }/static/widgets/jquery-fileupload-8.7.1/js/jquery.fileupload.js"></script>	
	<!-- handlebars -->
	<script src="${contextPath }/static/widgets/handlebars/handlebars-v1.3.0.js"></script>	
	<script src="${contextPath }/static/widgets/handlebars/handlebars-ext.js"></script>
</head>
<body>
    <div>
	    	<div><span class="label">导入模板下载</span>：<a href="${contextPath }/static/modules/imp/CustomerExcelToDB.xlsx">导入模板</a></div>
	    	<div><span class="label label-info">注意！</span>&nbsp;
	    		<ul>
	    			<li>为确保数据完整性和有效性，请勿多人同时导入;</li>
	    			<li>客户编号作为识别数据唯一性的关键属性，<b>重复编号将无法导入</b>;</li>
                    <li>客户名称作为识别数据唯一性的关键属性，<b>重复名称将无法导入</b>;</li>
	    			<li>属性为<span style="color:red">红色</span>的表示必填字段;</li>	    			
	    			<li>属性类型为日期的请使用Excel的日期格式;</li>
	    			<li>属性类型为数值的请使用Excel的数值格式;</li>
	    			<li>Excel默认会将输入内容为纯数字的转换类型为数值型造成内容变形，请设置“单元格格式”-&gt;“分类”为“文本”;</li>
	               <li>历史数据内容前隐含了一个单引号是为了避免文本内容因单元格数据类型不同，或者复制粘贴导致变形（如001将自动变为1），可利用<b>格式刷</b>将正常的单元格格式刷到这些单元格上</li>
	               <li>请勿使用Excel首行的筛选功能;</li>
	    		</ul>
	    	</div>
    </div>
	<!-- DATA GRID-->
    <form action="imp.json"  method="POST" enctype="multipart/form-data" onsubmit="return false;">
	<div class="toolbar">
		<div class="row-fluid">
			<div class="span16 fileupload-buttonbar">
				<span class="btn btn-success fileinput-button">
			        <i class="icon-plus icon-white"></i>
			        <span>选择文件</span>
			        <!-- The file input field used as target for the file upload widget -->
			        <input id="fileupload" type="file" name="files[]" multiple>
			    </span>&nbsp;
			    <button type="button" class="btn" onclick="location.href='index.do'">返回</button> 
            </div>
		</div>
	    <div class="row-fluid">						
		<!-- The global progress bar -->
	    <div id="progress" class="progress progress-success progress-striped">
	        <div class="bar"></div>
	    </div>
	    <div class="progress-extended"></div>
	       <table class="table table-striped">
	       	<col/>
	       	<col width="10%"/>
	       	<col width="10%"/>				        	
	       	<tbody id="files">
	       		
	       	</tbody>
	       </table>
		</div>
		<div class="row-fluid">		
			<ul id="failedRowPanel" class="list-group">
			
			</ul>
		</div>
	</div>
    </form>
<script type="text/javascript">
$(document).ready(function(){		
	$('#fileupload').fileupload({
        url: "imp.do",
        dataType: 'json',
        formData: function(form) { 
          return  form.serializeArray();
        },
        done: function (e, data) {
        	$("#failedRowPanel").empty();
        	var result = data.result;        	
        	if(result.error)
        	{
        		if(result.failedRowList)
        		{
        			for(var i=0;i<result.failedRowList.length;i++)
        			{
        				$("<li class='list-group-item'>"+result.failedRowList[i]+"</li>").appendTo($("#failedRowPanel"));	
        			}
        		}
        		else
        		{
        			$.webtools.notify({
    					type: "error",
    					message: result.errorMessage
    				});		  	
        		}
        	}
        	else
        	{			        		
        		// compile our template
        		$.webtools.notify({
					type: "success",
					message: "导入成功"
				});	
        	}
        	$("<li class='list-group-item'>导入完成.</li>").appendTo($("#failedRowPanel"));
        },
        start: function (e) {
        	$('#progress .bar').css(
	           'width', '0%'
	        );
        	$("#failedRowPanel").empty();
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
	});
})
</script>
</body>
</html>